<!--
 * 用户管理--新增编辑用户
 * @author: hexiaozhen
 * @since: 2023-09-26
 * addEditUser.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增用户' : '编辑用户'"
    title-align="start"
    width="800px"
    :mask-closable="false"
    draggable
    @cancel="handleCancel"
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :formItems="formItems"
      :formData="formData"
      :rowspan="12"
      class="tableForm"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, onMounted, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import { rule } from './data/addEditUser'
import system from '@/api/modules/system'
import { encrypt } from '@/utils/jsencrypt'
import { Message } from '@arco-design/web-vue'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const formAndTableRef = ref() // 表单
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addUser' : 'editUser'
      let param = { ...formData.value }
      param.password = encrypt(formData.value.password.trim())
      if (rowData.value.type === 'edit') {
        delete param.password
      }
      system[api](param).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 获取字典数据
const deptOptions = ref([])
const sexOptions = ref([])
const statusOptions = ref([])
const roleOptions = ref([])
// 表单配置
const formItems = reactive([
  { name: 'nickName', label: '用户姓名', type: 'a-input' },
  {
    name: 'deptId',
    label: '归属部门',
    type: 'a-tree-select',
    data: deptOptions,
    fieldNames: { key: 'deptId', title: 'deptName' },
  },
  { name: 'phonenumber', label: '手机号码', type: 'a-input' },
  { name: 'linephone', label: '座机号码', type: 'a-input' },
  { name: 'email', label: '邮箱', type: 'a-input', span: 24 },
  { name: 'userName', label: '用户账号', type: 'a-input' },
  { name: 'password', label: '用户密码', type: 'a-input-password', placeholder: '请输入用户密码', hide: false },
  { name: 'sex', label: '用户性别', type: 'a-select', options: sexOptions },
  { name: 'status', label: '状态', type: 'a-radio', options: statusOptions },
  { name: 'roleIds', label: '角色', type: 'a-select', options: roleOptions, multiple: true },
  { name: 'remark', label: '备注', type: 'a-textarea', span: 24 },
])
let formData = ref({
  nickName: '',
  deptId: '',
  phonenumber: '',
  linephone: '',
  email: '',
  userName: '',
  password: '',
  sex: '',
  status: '0',
  roleIds: [],
  remark: '',
})
if (rowData.value.type === 'edit') {
  Object.assign(formData.value, rowData.value)
  delete formData.value.type
  formItems[6].hide = true
}
const rules = reactive(rule)

const getTree = () => {
  system.getDeptList().then((res) => {
    deptOptions.value = res.data
  })
}
//  数据字典
const getOption = () => {
  const param = { dictTypes: 'sys_normal_disable,sys_user_sex' }
  system.getDicts(param).then((res) => {
    statusOptions.value = res.data.sys_normal_disable.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
    //性别
    sexOptions.value = res.data.sys_user_sex.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
  // 角色
  system.getRoleList().then((res) => {
    roleOptions.value = res.data.map((it) => ({
      label: it.roleName,
      value: it.roleId,
    }))
  })
}

onMounted(() => {
  getTree()
  getOption()
})
</script>

<style scoped>
:deep(.arco-card-size-medium .arco-card-body) {
  margin-bottom: 10px;
}
:deep(.arco-switch) {
  min-width: 43px !important;
}
</style>
